#Blog# 从零到壹：GitHub Pages + Hexo = Blog
Others
12 minutes read (About 1869 words) 0 visits

#Blog# 从零到壹：GitHub Pages + Hexo = Blog

利用GitHub Pages+Hexo打造一个个人博客，主要分为以下六个部分：

  • 环境准备 Environment
  • 文件配置 Configuration
  • 个性化 Customization
  • 博客写作 Writing
  • 双备份 Backup
  • 主机迁移 Migration

环境准备 Environment

安装Git + Github

  • 安装Git部署插件: 

    1
    $ npm install hexo-deployer-git --save

安装Node.js

安装Hexo

  • 安装Hexo:

    1
    $ npm install -g hexo-cli

  • 检查是否安装成功:

    1
    $ hexo -v

  • 初始化:

    1
    $ hexo init blog

文件配置 Configuration

本地运行

1
2
3
$ hexo clean # 删除缓存
$ hexo g # 生成Hexo页面
$ hexo s # 本地部署Hexo页面

远程运行

1
2
3
$ hexo clean # 删除缓存
$ hexo g # 生成Hexo页面
$ hexo d # 远程部署Hexo页面

基本配置

/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: LotteWong # 个人博客显示名称
subtitle: 在代码符号表象中避难。 # 个人博客副标题
description: # 搜索引擎描述信息
keywords: # 搜索引擎关键词
author: LotteWong # 网站作者
avatar: ./themes/icarus/source/images/favicon.ico # 网站头像
language: en # 网站语言
timezone: Asia/HongKong # 网站时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
plugins: # 设置个人博客插件
theme: icarus # 设置个人博客主题

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
  type: git # 部署类型
  repo: git@github.com:LotteWong/lottewong.github.io.git # 部署仓库
  branch: master # 部署分支

个性化 Customization

/themes/icarus/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
# Version of the Icarus theme that is currently used
version: 2.3.0
# Path or URL to the website's icon
favicon: /images/favicon.ico
# Path or URL to RSS atom.xml
rss: ./atom.xml
# Path or URL to the website's logo to be shown on the left of the navigation bar or footer
logo: /images/logo.png
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
    # Facebook App ID
    # fb_app_id: 
    # Facebook Admin ID
    # fb_admins: 
    # Twitter ID
    # twitter_id:
    # Twitter site
    # twitter_site: 
    # Google+ profile link
    # google_plus: 
# Navigation bar link settings 顶部栏设置
navbar:
    # Navigation bar menu links
    menu:
        Home: /
        Archives: /archives
        Categories: /categories
        Tags: /tags
        About: /about
    # Navigation bar links to be shown on the right
    links:
        Email:
            icon: far fa-envelope-open
            url: mailto:lottewong21@gmail.com
# Footer section link settings 页尾栏设置
footer:
    # Links to be shown on the right of the footer section
    links:
        GitHub:
            icon: fab fa-github
            url: 'https://github.com/LotteWong'
        RSS:
            icon: fas fa-rss
            url: /atom.xml
# Sidebar settings. 侧边栏设置
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # left sidebar settings
    left:
        # Whether the left sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
    # right sidebar settings
    right:
        # Whether the right sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
# Sidebar widget settings 侧边栏设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
    -
        # Widget name
        type: profile
        # Where should the widget be placed, left or right
        position: left
        # Author name to be shown in the profile widget
        author: LotteWong
        # Title of the author to be shown in the profile widget
        author_title: SCUT, Undergraduate
        # Author's current location to be shown in the profile widget
        location: Guangzhou, China
        # Path or URL to the avatar to be shown in the profile widget
        avatar: 
        # Email address for the Gravatar to be shown in the profile widget
        gravatar: 
        # Whether to show avatar image rounded or square
        avatar_rounded: false
        # Path or URL for the follow button
        follow_link: 'https://github.com/LotteWong'
        # Links to be shown on the bottom of the profile widget
        social_links:
            Organization:
                icon: fas fa-sitemap
                url: 'https://github.com/SCUTMSC'
            Project:
                icon: fas fa-project-diagram
                url: 'https://github.com/scutse-man-month-myth/InkYear'
    -
        # Widget name
        type: toc
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: category
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: archive
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: recent_posts
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tagcloud
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tag
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: links
        # Where should the widget be placed, left or right
        position: right
        # Links to be shown in the links widget
        links:
            Bokjan: 'https://bokjan.com/'
            Kingsley: 'https://kingsleyxie.cn/'
            sticnarf: 'https://sticnarf.me/'
            xcw: 'https://yifanyu123.github.io/'
            Escape: 'https://www.cnblogs.com/escape-w/'
# Article display settings
article:
    highlight: atom-one-light
        # Code highlight theme
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        # theme: atom-one-light
        # Show code copying button
        # clipboard: true
        # Default folding status of the code blocks. Can be "", "folded", "unfolded"
        # fold: unfolded
    # Whether to show article thumbnail images
    thumbnail: true
    # Whether to show estimate article reading time
    readtime: true
# Search plugin settings 搜索功能插件
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
    # Name of the search plugin
    type: insight
# Comment plugin settings 评论功能插件
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
    # Name of the comment plugin
    type: gitalk
    owner: LotteWong
    repo: lottewong.github.io
    client_id: 31cfc7a3a72e1e062ccd
    client_secret: 2bbe6fbc0ec688642d56254b2b72a87b555ec76d
    admin: LotteWong
# Donation entries 打赏功能插件
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
    # -
        # Donation entry name
        # type: alipay
        # Qrcode image URL
        # qrcode: '/images/alipay.png'
    # -
        # Donation entry name
        # type: wechat
        # Qrcode image URL
        # qrcode: '/images/wechat.png'
    # -
        # Donation entry name
        # type: paypal
        # Paypal business ID or email address
        # business: 'SuperGsama@outlook.com'
        # Currency code
        # currency_code: USD
# Share plugin settings 分享功能插件
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
    # Share plugin name
    type: 
# Other plugin settings
plugins:
    # Enable page animations
    animejs: true
    # Enable the lightGallery and Justified Gallery plugins
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
    gallery: true
    # Enable the Outdated Browser plugin
    # http://outdatedbrowser.com/
    outdated-browser: true
    # Enable the MathJax plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
    mathjax: true
    # Show the back to top button on mobile devices
    back-to-top: true
    # Google Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
    google-analytics:
        # Google Analytics tracking id
        tracking_id: 
    # Baidu Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
    baidu-analytics:
        # Baidu Analytics tracking id
        tracking_id: 
    # Hotjar user feedback plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
    hotjar:
        # Hotjar site id
        site_id: 
    # Show a loading progress bar at top of the page
    progressbar: true
    # Show the copy button in the highlighted code area
    clipboard: true
    # BuSuanZi site/page view counter
    # https://busuanzi.ibruce.info
    busuanzi: true
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
    # Name or URL of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL of the webfont CDN provider
    fontcdn: google
    # Name or URL of the webfont Icon CDN provider
    iconcdn: fontawesome

博客写作 Writing

  • 默认

    1
    $ hexo new "blog title"

  • 自定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    title: {{ blog title }}
    categories: {{ blog category }}
    tags:
    - {{ blog tag }}
    toc: true
    thumbnail: {{ blog thumbnail }}

    {{ Abstract }}

    <!-- more -->

    {{ Content }}

双备份 Backup

  • Hexo备份: 

    1
    2
    # master branch
    $ hexo d

  • Src备份: 

    1
    2
    3
    4
    5
    # dev branch
    $ git checkout dev
    $ git add --all
    $ git commit -m "new blog"
    $ git push origin dev

主机迁移 Migration

  • 已准备好环境：

    • hexo-cli
    • hexo-deployer-git

  • 拷贝以下博客文件：

    • _config.yml：配置文件
    • themes：主体文件
    • scaffolds：脚手架
    • source：博客文件
    • package.json：依赖文件
    • .gitignore：版本控制时忽略文件

  • 执行以下相关命令：

    1
    2
    3
    4
    5
    $ npm install # 安装依赖
    $ hexo clean # 清理缓存
    $ hexo g # 重新生成
    $ hexo s # 本地预览
    $ hexo d # 远端部署

待办事项 Todos

  • 对应图标
  • 更多插件
  • 绑定域名
  • 更新外链

参考链接 References

# GitHub Pages, Hexo
#Docker# LinuxOne上的Docker初体验

Comments

Follow

Categories

Archives

Recent

Tag Cloud

Concurrency Docker Fiddler Gin Git GitHub Pages Go-Micro GoConvey GoMock GoMonkey Golang Gorm Grpc Hexo JavaScript Kubernetes Linux Microservice Mock MongoDB Newman Postman Programming Paradigm PromQL Pytest Redis SQL Shell Swagger TypeScript Vim WSL

Tags

Concurrency 6
Docker 3
Fiddler 1
Gin 3
Git 1
GitHub Pages 1
Go-Micro 1
GoConvey 1
GoMock 1
GoMonkey 1
Golang 19
Gorm 1
Grpc 1
Hexo 1
JavaScript 1
Kubernetes 3
Linux 8
Microservice 12
Mock 3
MongoDB 1
Newman 1
Postman 1
Programming Paradigm 2
PromQL 1
Pytest 1
Redis 1
SQL 1
Shell 3
Swagger 1
TypeScript 1
Vim 1
WSL 4

Links

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×